<!DOCTYPE html>
<html>
<head>
    <title>Lazy Load Image</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
</head>
<body>

    <div>
        <div>
            <img id="1" data-loaded="false" data-src="image/1.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
        <div>
            <img id="2" data-loaded="false" data-src="image/2.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
        <div>
            <img id="3" data-loaded="false" data-src="image/3.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
        <div>
            <img id="4" data-loaded="false" data-src="image/4.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
        <div>
            <img id="5" data-loaded="false" data-src="image/5.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
        <div>
            <img id="6" data-loaded="false" data-src="image/6.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
        <div>
            <img id="7" data-loaded="false" data-src="image/7.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
        <div>
            <img id="8" data-loaded="false" data-src="image/8.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
        <div>
            <img id="9" data-loaded="false" data-src="image/9.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
        <div>
            <img id="10" data-loaded="false" data-src="image/10.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
        <div>
            <img id="11" data-loaded="false" data-src="image/11.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
        <div>
            <img id="12" data-loaded="false" data-src="image/12.jpg" class="lazy" src="image/default_image.jpg"/>
        </div>
    </div>

</body>
</html>